<template>
  <div class="item flex-row-center-between pd10">
    <div class="flex1">
      <el-link type="primary">
        <span class="bold fs16" @click="emits('customer-name-click', props.data)">{{ props.data.customerName }}</span>
      </el-link>
    </div>
    <div class="flex1 flex">
      <div class="flex-column-right-center">
        <div>
          <span class="grey-text mgr10">总故障</span>
          <span class="red mgr10 bold">{{ props.data.totalFault }}</span>
          <span class="grey-text">个</span>
        </div>
        <div class="mgt10">
          <span class="grey-text mgr10">线均故障</span>
          <span class="red mgr10 bold">{{ props.data.avgLineFault }}</span>
          <span class="grey-text">个</span>
        </div>
      </div>
    </div>
    <div class="flex1 flex">
      <div class="flex">
        <div class="flex-column-right-center">
          <div>
            <span class="grey-text mgr10">设备总线路</span>
            <span class="bold">{{ props.data.totalLines }}</span>
          </div>
          <div class="mgt10">
            <span class="grey-text mgr10">发生故障线路</span>
            <span class="bold">{{ props.data.faultLineCount }}</span>
          </div>
        </div>
      </div>

      <div class="mgl20">
        <div>
          <span class="grey-text">占比</span>
        </div>
        <div class="mgt10">
          <span class="fs20 bold">{{ props.data.lineRate }}</span>
        </div>
      </div>
    </div>

    <div class="mgr20">
      <div>
        <span class="grey-text mgr10">首次发生故障</span>
        <span class="bold">注册后{{ props.data.startMonth }}个月</span>
      </div>
      <div class="mgt10">
        <span class="grey-text mgr10">连续发生故障</span>
        <span class="bold">最长{{ props.data.duringMonth }}个月</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue'
  import type { FaultDistribution } from '../config'

  interface IEmits {
    (e: 'customer-name-click', data: FaultDistribution): void
  }
  const emits = defineEmits<IEmits>()

  const props = defineProps({
    data: {
      type: Object as PropType<FaultDistribution>,
      default: () => ({})
    }
  })
</script>

<style scoped lang="less">
  .item {
    background: #f6f7fb;
    .red {
      color: #d92329;
    }
  }
</style>
